<template>
  <div>
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="params.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="按角色划分">
        <el-select v-model="params.role" placeholder="按角色划分">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="大众会员" value="大众会员"></el-option>
          <el-option label="皇冠用户" value="皇冠用户"></el-option>
          <el-option label="商家" value="商家"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryByParams">查询</el-button>
        <el-button type="primary" @click="openAddDialog">新建账号</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%" max-height="500">
      <el-table-column fixed prop="users.userId" label="用户ID" width="150">
      </el-table-column>
      <el-table-column prop="users.userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column
        prop="users.roleId"
        label="角色"
        width="120"
        :formatter="formatRole"
      >
      </el-table-column>
      <el-table-column prop="users.userAccount" label="账号" width="120">
      </el-table-column>
      <el-table-column
        prop="users.password"
        label="密码"
        width="120"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="users.userLng" label="经度" width="120">
      </el-table-column>
      <el-table-column prop="users.userLat" label="纬度" width="120">
      </el-table-column>
      <el-table-column
        prop="users.userAddr"
        label="结构化地址"
        width="120"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="users.userTelephone" label="电话" width="120">
      </el-table-column>
      <el-table-column
        prop="users.discountTimes"
        label="剩余优惠次数"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="users.registerTime"
        label="注册时间"
        width="120"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="users.latestLoginTime"
        label="最后登录时间"
        width="120"
        show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="updated(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="deleted(scope.row)"
            >删除</el-button
          >

        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageDto.page"
        :page-sizes="[5, 10, 20, 30, 50]"
        :page-size="pageDto.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100"
      >
      </el-pagination>
    </div>

    <!-- 新增表单 -->
    <el-dialog title="新增用户" :visible.sync="insertVb" width="30%">
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="addForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="addForm.roleId">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="大众会员" value="2"></el-option>
            <el-option label="商家" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="addForm.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="addForm.userLng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="addForm.userLat"></el-input>
        </el-form-item>
        <el-form-item label="结构化地址">
          <el-input v-model="addForm.userAddr"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addForm.userTelephone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insertVb = false">取 消</el-button>
        <el-button type="primary" @click="handleInsert">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改表单 -->
    <el-dialog title="修改用户" :visible.sync="updateVb" width="30%">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="用户ID">
          <el-input v-model="editForm.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editForm.roleId">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通用户" value="2"></el-option>
            <el-option label="金冠会员" value="3"></el-option>
            <el-option label="商家" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editForm.userAccount" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="editForm.password"></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="editForm.userLng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="editForm.userLat"></el-input>
        </el-form-item>
        <el-form-item label="结构化地址">
          <el-input v-model="editForm.userAddr"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editForm.userTelephone"></el-input>
        </el-form-item>
        <el-form-item
          label="剩余优惠次数"
          v-if="editForm.roleId != 4 && editForm.roleId != 1"
        >
          <el-input-number v-model="editForm.discountTimes"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateVb = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "usertable",
  data() {
    return {
      pageDto: { page: 1, size: 10, users: {} },
      list: [],
      displayList: [],
      params: {},
      //增
      addForm: {},
      insertVb: false,
      //改
      editForm: {},
      updateVb: false,
    };
  },
  methods: {
    // element ui
    // 分页
    handleSizeChange(val) {
      this.pageDto.size = val;
      this.queryByPage();
    },
    handleCurrentChange(val) {
      this.pageDto.page = val;
      this.queryByPage();
    },
    // 删除
    deleted(row) {
      this.$api.usersApi
        .deleteById({ userId: row.users.userId })
        .then((res) => {
          if (res.data.code == 1) {
            this.$notify({
              title: "成功",
              message: "数据删除成功！",
              type: "success",
            });
            this.queryByPage();
          } else {
            this.$notify.error({
              title: "错误",
              message: "数据删除失败！",
            });
          }
        });
      this.queryByPage();
    },
    //角色展示
    formatRole(data) {
      switch (data.users.roleId) {
        case 1:
          return "管理员";
          break;
        case 2:
          return "大众会员";
          break;
        case 3:
          return "金冠会员";
          break;
        case 4:
          return "商家账号";
          break;
        default:
          return "未知角色";
          break;
      }
    },
    // 请求参数
    queryByPage() {
      this.$api.usersApi.queryByPage(this.pageDto).then((res) => {
        this.list = res.data.data;
      });
    },

    //增
    openAddDialog() {
      this.insertVb = true;
    },
    handleInsert() {
      this.pageDto.users = this.addForm;
      this.$api.usersApi.insert(this.pageDto).then((res) => {
        if (res.data.code == 1) {
          this.$notify({
            title: "成功",
            message: "用户数据添加成功",
            type: "success",
          });
          this.insertVb = false;//关闭本页面
          this.pageDto.users = {};
          this.queryByPage();//刷新数据
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    //改
    updated(row){
      console.log(row);
      this.editForm = { ...row.users };//赋值
      this.updateVb = true;//打开窗口
    },
    handleUpdate(){
      this.pageDto.users = this.editForm;
      this.$api.usersApi.update(this.pageDto).then((res) => {
        if (res.data.code == 1) {
          this.$notify({
            title: "成功",
            message: "用户数据修改成功",
            type: "success",
          });
          this.updateVb = false;//关闭本页面
          this.pageDto.users = {};
          this.queryByPage();//刷新数据
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },

    //搜索
    queryByParams() {
      //数据处理
      this.pageDto.users.userName = this.params.name;
      if (this.params.role == "管理员") this.pageDto.users.roleId = 1;
      else if (this.params.role == "大众会员") this.pageDto.users.roleId = 2;
      else if (this.params.role == "皇冠用户") this.pageDto.users.roleId = 3;
      else if (this.params.role == "商家") this.pageDto.users.roleId = 4;

      //调用方法
      this.queryByPage();
    },
  },
  mounted() {
    this.queryByPage();
  },
};
</script>
